<template>
  <div>
    <header>
      <div style="background-color: #f0f2f5; height: 60px">
        <span style="font-size: larger;padding-bottom: 15px">欢迎来到环球书屋</span>
        <span style="padding: 16px 0px 16px 860px;">
          <el-dropdown style="padding: 6px 6px" trigger="click">
            <div class="avatar-wrapper">
              <img style="width: 40px; height: 40px" src="avatar.gif">
              <i class="el-icon-caret-bottom"></i>
            </div>
            <el-dropdown-menu class="user-dropdown" slot="dropdown">
              <router-link class="inlineBlock" to="/front/my">
                <el-dropdown-item>
                  我的地址
                </el-dropdown-item>
              </router-link>
              <el-dropdown-item divided>
                <span @click="logout" style="display:block;">注销</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <router-link to="/front/my/order">我的订单</router-link>
        </span>
      </div>
      <div>
        <el-form :inline="true" :model="formInline" style="text-align: center; ">
          <span style="padding: 30px 10px">
            <router-link to="/front">
              <img :src=logoPicture style="width: 370px; height: 100px">
            </router-link>
          </span>
          <el-form-item>
            <el-input v-model="inputMessage" placeholder="请输入内容" style="width: 500px;padding: 30px 10px"></el-input>
          </el-form-item>
          <el-form-item style="padding: 30px 10px">
            <el-button type="primary" icon="el-icon-search" @click="toSearchPage">搜索</el-button>
            <el-button type="danger" icon="el-icon-shopping-cart-full" @click="showCart">购物车</el-button>
          </el-form-item>
        </el-form>
      </div>

    </header>
    <hr size="5" color="red"/>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        logoPicture: 'newlogo.png',
        inputMessage: ''
      }
    },
    methods: {
      showCart() {
        this.$router.push('/front/cart')
      },
      toSearchPage() {
        this.$router.push({
          path: '/front/search',
          name: 'Search',
          query: {
            inputMessage: this.inputMessage
          }
        })
      },
      logout() {
        this.$store.dispatch('LogOut').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      }
    }
  }
</script>

<style scoped>

</style>
